<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>鲲鲲记事本</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="noteApp">
        <div>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in carouselPic" :key="item">
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 头部输入框 -->
        <header>
          <h1>鲲鲲记事本</h1>
          <input
            type="text"
            v-model="todo"
            @keyup.enter="add"
            placeholder="爱你么么哒"
          />
        </header>
        <!-- 显示待办 -->
        <section class="main" v-if="list.length">
          <ul>
            <li v-for="(item,index) in list">
              <span>{{index+1}}</span> <label>{{item}}</label>
              <button @click="del(index)">x</button>
            </li>
          </ul>
        </section>

        <section class="main" style="text-align: center" v-else>
          <span>恭喜, 达成新成就: 练习时长两年半</span>
          <img src="image/鸡你太美.gif" width="250px" />
          <br />
          <button onclick="javascript:location.reload()">再练习两年半</button>
        </section>

        <!-- 底部信息 -->
        <footer class="footer" v-if="list.length">
          <div>
            <span>练习总数:{{list.length}}</span>
          </div>
          <div>
            <button @click="delAll">已练习全部</button>
            <button @click="changBg">切换背景</button>
          </div>
        </footer>
        <div class="songWrap">
          <div class="picWrap">
            <img src="image/cxk.jpg" />
          </div>
          <div class="song">
            <audio src="audio/鸡你太美.mp3" controls></audio>
            <audio :src="audioSrc" autoplay></audio>
          </div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
